From 1eee181e219dfd993d396ac3169e7aad3dd285eb Mon Sep 17 00:00:00 2001 From: Factiven Date: Sun, 16 Jul 2023 22:35:39 +0700 Subject: Update v3.6.4 - Added Manga page with a working tracker for AniList user - Added schedule component to home page - Added disqus comment section so you can fight on each other (not recommended) - Added /id and /en route for english and indonesian subs (id route still work in progress) --- pages/anime/watch/[...info].js | 587 ----------------------------------------- 1 file changed, 587 deletions(-) delete mode 100644 pages/anime/watch/[...info].js (limited to 'pages/anime/watch/[...info].js') diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js deleted file mode 100644 index d47071e..0000000 --- a/pages/anime/watch/[...info].js +++ /dev/null @@ -1,587 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import Head from "next/head"; -import { useEffect, useState } from "react"; -import dynamic from "next/dynamic"; - -import { getServerSession } from "next-auth/next"; -import { authOptions } from "../../api/auth/[...nextauth]"; - -import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; -import "react-loading-skeleton/dist/skeleton.css"; - -import { Navigasi } from "../.."; -import { ChevronDownIcon, ForwardIcon } from "@heroicons/react/24/solid"; -import { useRouter } from "next/router"; - -import { GET_MEDIA_USER } from "../../../queries"; - -import dotenv from "dotenv"; - -const VideoPlayer = dynamic(() => - import("../../../components/videoPlayer", { ssr: false }) -); - -export default function Info({ sessions, id, aniId, provider, proxy, api }) { - const [epiData, setEpiData] = useState(null); - const [data, setAniData] = useState(null); - const [skip, setSkip] = useState({ op: null, ed: null }); - const [statusWatch, setStatusWatch] = useState("CURRENT"); - const [playingEpisode, setPlayingEpisode] = useState(null); - const [loading, setLoading] = useState(false); - const [playingTitle, setPlayingTitle] = useState(null); - const [poster, setPoster] = useState(null); - const [progress, setProgress] = useState(0); - - const [episodes, setEpisodes] = useState([]); - const [artStorage, setArtStorage] = useState(null); - - const router = useRouter(); - - // console.log(data); - - useEffect(() => { - const defaultState = { - epiData: null, - skip: { op: null, ed: null }, - statusWatch: "CURRENT", - playingEpisode: null, - loading: false, - }; - - // Reset all state variables to their default values - Object.keys(defaultState).forEach((key) => { - const value = defaultState[key]; - if (Array.isArray(value)) { - value.length - ? eval( - `set${ - key.charAt(0).toUpperCase() + key.slice(1) - }(${JSON.stringify(value)})` - ) - : eval(`set${key.charAt(0).toUpperCase() + key.slice(1)}([])`); - } else { - eval( - `set${key.charAt(0).toUpperCase() + key.slice(1)}(${JSON.stringify( - value - )})` - ); - } - }); - - const fetchData = async () => { - try { - if (provider) { - const res = await fetch( - `${api}/meta/anilist/watch/${id}?provider=${provider}` - ); - const epiData = await res.json(); - setEpiData(epiData); - } else { - const res = await fetch(`${api}/meta/anilist/watch/${id}`); - const epiData = await res.json(); - setEpiData(epiData); - } - } catch (error) { - setTimeout(() => { - window.location.reload(); - }, 3000); - } - - let aniData = null; - setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings"))); - - if (provider) { - const res = await fetch( - `${api}/meta/anilist/info/${aniId}?provider=${provider}` - ); - aniData = await res.json(); - setEpisodes(aniData.episodes?.reverse()); - setAniData(aniData); - } else { - const res2 = await fetch(`${api}/meta/anilist/info/${aniId}`); - aniData = await res2.json(); - setEpisodes(aniData.episodes?.reverse()); - setAniData(aniData); - } - - let playingEpisode = aniData.episodes - .filter((item) => item.id == id) - .map((item) => item.number); - - setPlayingEpisode(playingEpisode); - - const playing = aniData.episodes.filter((item) => item.id == id); - - setPoster(playing); - - const title = aniData.episodes - .filter((item) => item.id == id) - .find((item) => item.title !== null); - setPlayingTitle( - title?.title || aniData.title?.romaji || aniData.title?.english - ); - - const res4 = await fetch( - `https://api.aniskip.com/v2/skip-times/${aniData.malId}/${parseInt( - playingEpisode - )}?types[]=ed&types[]=mixed-ed&types[]=mixed-op&types[]=op&types[]=recap&episodeLength=` - ); - const skip = await res4.json(); - - const op = skip.results?.find((item) => item.skipType === "op") || null; - const ed = skip.results?.find((item) => item.skipType === "ed") || null; - - setSkip({ op, ed }); - - if (sessions) { - const response = await fetch("https://graphql.anilist.co/", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - query: GET_MEDIA_USER, - variables: { - username: sessions?.user.name, - }, - }), - }); - - const dat = await response.json(); - - const prog = dat.data.MediaListCollection; - - const gat = prog?.lists.map((item) => item.entries); - const git = gat?.map((item) => - item?.find((item) => item.media.id === parseInt(aniId)) - ); - const gut = git?.find((item) => item?.media.id === parseInt(aniId)); - - if (gut) { - setProgress(gut.progress); - } - - if (gut?.status === "COMPLETED") { - setStatusWatch("REPEATING"); - } else if ( - gut?.status === "REPEATING" && - gut?.media?.episodes === parseInt(playingEpisode) - ) { - setStatusWatch("COMPLETED"); - } else if (gut?.status === "REPEATING") { - setStatusWatch("REPEATING"); - } else if (gut?.media?.episodes === parseInt(playingEpisode)) { - setStatusWatch("COMPLETED"); - } else if ( - gut?.media?.episodes !== null && - aniData.totalEpisodes === parseInt(playingEpisode) - ) { - setStatusWatch("COMPLETED"); - setLoading(true); - } - } - setLoading(true); - }; - fetchData(); - }, [id, aniId, provider, sessions]); - - useEffect(() => { - const mediaSession = navigator.mediaSession; - if (!mediaSession) return; - - const artwork = - poster && poster.length > 0 - ? [{ src: poster[0].image, sizes: "512x512", type: "image/jpeg" }] - : undefined; - - mediaSession.metadata = new MediaMetadata({ - title: playingTitle, - artist: `Moopa ${ - playingTitle === data?.title?.romaji - ? "- Episode " + playingEpisode - : `- ${data?.title?.romaji || data?.title?.english}` - }`, - artwork, - }); - }, [poster, playingTitle, playingEpisode, data]); - - return ( - <> - - {playingTitle || "Loading..."} - - - -
- -
-
- {loading ? ( - Array.isArray(epiData?.sources) ? ( -
- -
- ) : ( -
-

- Whoops! Something went wrong. Please reload the page or - try other sources. {`:(`} -

-
- ) - ) : ( -
- )} -
- {data && data?.episodes.length > 0 ? ( - data.episodes - .filter((items) => items.id == id) - .map((item, index) => ( -
-
-
- - {item.title || - data.title.romaji || - data.title.english} - -
-

- Episode {item.number} -

-
-
-
- - -
- -
-
- )) - ) : ( -
-
-
- -
-
-

- -

-
- )} -
- -
-
- {data ? ( - Anime Cover - ) : ( - - )} -
-
-
-

- Studios -

-
- {data ? data.studios : } -
-
-
- - - -
-
-
-
-

- Status -

-
{data ? data.status : }
-
-
-

- Titles -

-
- {data ? ( - <> -
- {data.title.romaji || ""} -
-
- {data.title.english || ""} -
-
- {data.title.native || ""} -
- - ) : ( - - )} -
-
-
-
-
- {data && - data.genres.map((item, index) => ( -
- {item} -
- ))} -
-
- {data && ( -

- )} -

-
-
-
-

- Up Next -

-
- {data && data?.episodes.length > 0 ? ( - data.episodes.some( - (item) => item.title && item.description - ) ? ( - episodes.map((item) => { - const time = artStorage?.[item.id]?.time; - const duration = artStorage?.[item.id]?.duration; - let prog = (time / duration) * 100; - if (prog > 90) prog = 100; - return ( - -
-
- Anime Cover - - - Episode {item.number} - - {item.id == id && ( -
- - - -
- )} -
-
-
-

- {item.title} -

-

- {item.description} -

-
- - ); - }) - ) : ( - data.episodes.map((item) => { - return ( - - Episode {item.number} - - ); - }) - ) - ) : ( - <> - {[1].map((item) => ( - - ))} - - )} -
-
-
-
- - - ); -} - -export async function getServerSideProps(context) { - dotenv.config(); - - const API_URI = process.env.API_URI; - - const session = await getServerSession(context.req, context.res, authOptions); - - const proxy = process.env.PROXY_URI; - - const { info } = context.query; - if (!info) { - return { - notFound: true, - }; - } - - const id = info[0]; - const aniId = info[1]; - const provider = info[2] || null; - - return { - props: { - sessions: session, - id, - aniId, - provider, - proxy, - api: API_URI, - }, - }; -} -- cgit v1.2.3